<template>
	<!-- 墒情预警 -->
	<view class="content">
		<u-loading-icon v-if="loading" text="加载中" textSize="18"></u-loading-icon>
		<template v-else>
			<view v-for="(item,index) in list" :key="index">
				<view class="item" v-if="item.id" @click="toDetail(item.id)">
					<view class="title">
						<image class="titleIcon" src="/subPages/static/index/moisture/titleIcon.png" mode=""></image>
						墒情预警1
					</view>
					<view class="main">
						<view class="equipmentID justify-start align-center inline-flex"
							@click.stop="copyIdFn(item.stationId)">
							设备ID: {{item.stationId}}
							<image class="copyIcon" src="@/static/app/copy.png" mode=""></image>
						</view>
						<view class="gray">
							最新上报时间: {{$util.timestampToTime(item.monitorTime)}}
						</view>
						<view class="gray">
							添加设备时间: {{$util.timestampToTime(item.createTime)}}
						</view>
						<view class="gray">
							设备已运行: {{item.runTime}}天
						</view>
					</view>
					<view class="logo">
						<image v-if="item.isOnline==1" src="/subPages/static/index/moisture/inline.png" mode=""></image>
						<image v-else src="/subPages/static/index/moisture/offline.png" mode=""></image>
					</view>
				</view>

				<view class="item item2" v-else @click="toDetail2(item.deviceAddr)">
					<view class="title">
						<image class="titleIcon" src="/subPages/static/index/moisture/titleIcon.png" mode=""></image>
						墒情预警2
					</view>
					<view class="main">
						<view class="equipmentID align-center inline-flex" @click.stop="copyIdFn(item.deviceAddr)">
							设备地址: {{item.deviceAddr}}
							<image class="copyIcon" src="@/static/app/copy.png" mode=""></image>
						</view>
						<view class="gray">
							设备编码: {{item.deviceCode}}
						</view>
						<view class="gray">
							报警开关: {{
					  item.alarmSwitch === 1 ? '离线报警' : item.alarmSwitch === 2 ? '超限报警' : item.alarmSwitch === 4 ? '复归通知' : item.alarmSwitch === 3 ? '离线报警+超限报警' : item.alarmSwitch === 5 ? '离线报警+复归通知' : item.alarmSwitch === 6 ? '超限报警+复归通知' : '离线报警+超限报警+复归通知'
					}}
						</view>
						<view class="gray">
							地址: 庐江县同大镇
						</view>
					</view>
					<view class="logo"
						:style="{background:item.deviceStatus === 'normal' ? '#639F66' : item.deviceStatus === 'alarming' ? '#ff0000' : item.deviceStatus === 'preAlarming' ? '#ff0000' : '#999999'}">
						{{item.deviceStatus === 'normal' ? '正常' : item.deviceStatus === 'alarming' ? '报警' : item.deviceStatus === 'preAlarming' ? '预警' : '离线'}}
					</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	import {
		getMoistureAll
	} from '@/api/index/equipment.js'

	import {
		getRealDataAnalysis_rk
	} from '@/api/app/dataAnalysis.js'
	export default {
		data() {
			return {
				list: [],
				pageInfo: {
					pageNo: 1,
					pageSize: 10
				},
				loading: true
			}
		},
		onLoad() {
			this.getMoistureListFn()
		},
		methods: {
			async getMoistureListFn() {
				this.loading = true;
				let res2 = await getMoistureAll();
				let res3 = await getRealDataAnalysis_rk();
				this.list = res2.filter(item => {
					item.deviceStatus = res3.find(v => v.deviceAddr == item.deviceAddr).deviceStatus
					let waterArr = [21061727, 21061733]
					return waterArr.includes(item.deviceAddr)
				})
				this.loading = false;

			},
			// 复制设备id
			copyIdFn(id) {
				let that = this;
				uni.setClipboardData({
					data: String(id),
					success() {
						that.$util.msg('复制成功')
					},
					fail() {
						that.$util.msg('复制失败，请重试')
					}
				})
			},
			toDetail2(deviceAddr) {
				uni.navigateTo({
					url: '/subPages/app/appDetail2/index?deviceAddr=' + deviceAddr
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.u-loading-icon {
		padding: 50rpx 0;
	}

	.content {
		width: 100%;
		min-height: calc(100vh - 44px);
		padding: 0 1rem;
		background: #F5F5F5;

		.item {
			position: relative;
			padding: 1.5rem 2rem;
			font-size: 1.4rem;
			background: #fff;
			margin-top: 1rem;
			display: inline-block;

			// 手机
			@media screen and (max-width:767px) {
				width: 100%;

			}

			//平板
			@media screen and (min-width: 768px) and (max-width: 992px) {
				width: calc(50% - 1rem);

				&:nth-child(even) {
					margin-left: 2rem;
				}
			}

			border-radius: 16rpx;

			&:last-child {
				margin-bottom: 1rem;
			}

			.title {
				display: flex;
				align-items: center;
				color: #639F66;
				padding-bottom: 1rem;

				.titleIcon {
					height: 1.8rem;
					width: 1.8rem;
					margin-right: .25rem;
				}
			}

			.main {
				.copyIcon {
					height: 1.5rem;
					width: 1.5rem;
					margin-left: 1rem;
				}

				.equipmentID {
					color: #333;
					font-weight: bold;
					padding-bottom: .5rem;
				}

				.gray {
					padding-bottom: .5rem;
					color: #999;
				}
			}

			.logo {
				position: absolute;
				bottom: 0;
				right: 0;

				image {
					width: 3.6rem;
					height: 2rem;
				}
			}
		}
	}

	.item2 {
		.logo {
			width: 3.6rem;
			height: 2rem;
			line-height: 2rem;
			color: #fff;
			border-radius: 0 0 16rpx 0;
			text-align: center;
			font-size: 1.2rem;
		}
	}
</style>